<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!-- header -->
<jsp:include page="../include/header.jsp"></jsp:include>
<header id="header">
	<!--header-->

	<!--/header-middle-->
	<jsp:include page="../include/header_middle.jsp"></jsp:include>
	<!--header-bottom-->
	<jsp:include page="../include/header_bottom.jsp"></jsp:include>
	<!--/header-bottom-->
</header>
<!--/header-->


<script type="text/javascript">
	$(function start0() {
		var html="";

		$.ajax({
			
					url : 'BoardQnAlistAll',
					type : 'get',
					sync :  true,
					dataType : 'json',
					success : function(boardqnaJSON) {
							
							html+="<table width='80%' align='center' class=\"boardqna_table\">";
							html+="<thead>";
							html+="	<tr>";
							html+="		<td align='center' width='20%'>번호</td>";
							html+="		<td align='center' width='60%'>제목</td>";
							html+="		<td align='center' width='20%'>닉네임</td>";
							html+="	</tr>";
							html+="	</thead>";
							html+="<tbody class='boardqna_table_post'>";
							
						for (i in boardqnaJSON) {
							html += "<tr class='boardqna_tr' align='center'>";
							
							//맨 좌측 게시판 번호
							html += "<td class=\"board_qna_no\" width='20%'>";
							html += "<a href='BoardQnAlistDetailView?qnaboard_no="
									+ boardqnaJSON[i].qnaboard_no + "'>"+ boardqnaJSON[i].qnaboard_no;
							html += "</td>";
							
							//제목
							html += "<td class=\"board_qna_title\" width='60%'>";
							html += "<h4><a href='BoardQnAlistDetailView?qnaboard_no="
									+ boardqnaJSON[i].qnaboard_no
									+ "'>"
									+ boardqnaJSON[i].qnaboard_title
									+ "</a></h4>";
							html += "</td>";

							//닉네임
							html += "<td class=\"board_qna_nickname\" width='20%'>";
							html += "<h2>" + boardqnaJSON[i].qnaboard_nickname
									+ "</h2>";
							html += "</td>";
							html+="</tr>";
							//html+="</table>";

						};
						
						html+="</tbody>";
						html+="</table>";
						
						$('#aaaa').html(html);
						
						
						
						
						
						//페이지쪼개기
						$('.boardqna_table').each(function() {
					    	
						       var pagesu = 10;  //페이지 번호 갯수
						       
						       var currentPage = 0;
						       var numPerPage = 10;
						       var $table = $(this);
						       
						       var numRows = $table.find('.boardqna_tr').length;
						       
						       var numPages = Math.ceil(numRows / numPerPage);
						       
						       if (numPages==0) return;
						       var $pager = $('<div id="remo" class="pager"></div>');

						       var nowp = currentPage;
						        var endp = nowp+10;
						       $table.bind('repaginate', function() {
						       $table.find('.boardqna_tr').hide()
						       .slice(currentPage * numPerPage,
						       (currentPage + 1) * numPerPage)
						       .show();
						       if (numPages > 1) {     // 한페이지 이상이면
						             if (currentPage < 5 && numPages-currentPage >= 5) {   // 현재 5p 이하이면
						              nowp = 0;     // 1부터 
						              endp = pagesu;    // 10까지
						             }else{
						              nowp = currentPage -5;  // 6넘어가면 2부터 찍고
						              endp = nowp+pagesu;   // 10까지
						              pi = 1;
						             }
						             
						             if (numPages < endp) {   // 10페이지가 안되면
						              endp = numPages;   // 마지막페이지를 갯수 만큼
						              nowp = numPages-pagesu;  // 시작페이지를   갯수 -10
						             }
						             if (nowp < 1) {     // 시작이 음수 or 0 이면
						              nowp = 0;     // 1페이지부터 시작
						             };
						            }else{       // 한페이지 이하이면
						             nowp = 0;      // 한번만 페이징 생성
						             endp = numPages;
						            };
						       });
						        
						       // [처음]
						         $('<span class="page-number" cursor: "pointer">[처음]</span>').bind('click', {newPage: page},function(event) {
						                currentPage = 0;   
						                $table.trigger('repaginate');  
						                $($(".page-number")[2]).addClass('active').siblings().removeClass('active');
						            }).appendTo($pager).addClass('clickable');
						       
						         // [이전]
						            $('<span class="page-number" cursor: "pointer">&nbsp;&nbsp;&nbsp;[이전]&nbsp;</span>').bind('click', {newPage: page},function(event) {
						                if(currentPage == 0) return; 
						                currentPage = currentPage-1;
						          $table.trigger('repaginate'); 
						          $($(".page-number")[(currentPage-nowp)+2]).addClass('active').siblings().removeClass('active');
						         }).appendTo($pager).addClass('clickable');
						       
						         // [1,2,3,4,5,6,7,8]
						       for (var page = 0; page < numPages; page++) {
						       $('<span class="page-number" cursor: "pointer" style="margin-left: 8px;"></span>').text(page + 1)
						       .bind('click', {newPage: page}, function(event) {
						       currentPage = event.data['newPage'];
						       $table.trigger('repaginate');
						       $(this).addClass('active')
						       .siblings().removeClass('active');
						       }).appendTo($pager).addClass('clickable');
						       }
						       
						       // [다음]
						         $('<span class="page-number" cursor: "pointer">&nbsp;&nbsp;&nbsp;[다음]&nbsp;</span>').bind('click', {newPage: page},function(event) {
						       if(currentPage == numPages-1) return;
						           currentPage = currentPage+1;
						       $table.trigger('repaginate'); 
						        $($(".page-number")[(currentPage-nowp)+2]).addClass('active').siblings().removeClass('active');
						      }).appendTo($pager).addClass('clickable');
						       
						      // [끝]
						         $('<span class="page-number" cursor: "pointer">&nbsp;[끝]</span>').bind('click', {newPage: page},function(event) {
						                 currentPage = numPages-1;
						                 $table.trigger('repaginate');
						                 $($(".page-number")[endp-nowp+1]).addClass('active').siblings().removeClass('active');
						         }).appendTo($pager).addClass('clickable');
						       
						       $pager.insertAfter($table)
						       .find('span.page-number:first').addClass('active');
						         $table.trigger('repaginate');
						       });
						}

				});
	});
		
		
		 
			 //alert("이거왜안되나요?");
		    
		
</script>


<h1>게시판 실험입니다~</h1>
<div id="aaaa"></div>


<div id="content">


	<div id="no_list"></div>
</div>



<!--Footer-->
<jsp:include page="../include/footer.jsp"></jsp:include>
<!--/Footer-->

